<template>
    <div id="dragLayoutBox">
      <div class="left_box" style="width: 66%;">
        <slot name="left-content"></slot>
      </div>
      <div class="right_box" style="width: 34%;">
        <div v-if="iframeIsHave" class="opacity_box"></div>
        <div
          class="drag_btn"
          @mousedown="changeBoxStyleFn('')"
          @onmouseup="changeBoxStyleFn('none')"
        ></div>
        <slot name="right-content"> </slot>
      </div>
    </div>
  </template>
  <!-- v-show="dragBtnFlag" -->
  <script>
  export default {
    props: {
      // 是否默认显示拖拽按钮
      dragBtnFlag: {
        typeof: Boolean,
        default: true
      },
      // 盒子中是否有iframme
      iframeIsHave: {
        typeof: Boolean,
        default: false
      },
      // 配置项 注意：色值暂时只支持16进制写法
      setCssProps: {
        typeof: Object,
        default: () => ({
          // 左右盒子最小拖动宽度
          leftMinWidth: '100px',
          rightMinWidth: '0px',
          dragBtnCss: {
            mousedown: {
              background: '#919191'
            },
            onmouseup: {
              background: '#d6d6d6'
            }
          }
        })
      }
    },
    mounted() {
    //   if (this.iframeIsHave) {
    //     this.changeBoxStyleFn('none')
    //   }
      this.dragChangeLayoutFn()
    },
    methods: {
      getDomFn(name) {
        const ele = document.querySelector(name)
        const ws = new WeakSet()
        ws.add(ele)
        return ele
      },
      changeBoxStyleFn(value) {
        if (this.iframeIsHave) {
          const opacityBox = this.getDomFn('.opacity_box')
          opacityBox.style.display = value
        }
      },
      dragChangeLayoutFn() {
        const that = this
        const dragBtn = this.getDomFn('.drag_btn')
        const left_box = this.getDomFn('.left_box')
        const right_box = this.getDomFn('.right_box')
        const dragLayoutBox = this.getDomFn('#dragLayoutBox')
        dragBtn.onmousedown = function (e) {
          const styleStr = that.handleEleStyleFn(that.setCssProps.dragBtnCss.mousedown)
          dragBtn.style.cssText = `${styleStr}`
          const startPos = e.clientX
          dragBtn.left = dragBtn.offsetLeft
          document.onmousemove = e => {
            const endPos = e.clientX
            let moveW = dragBtn.left - 20 + (endPos - startPos)
            const maxW = dragLayoutBox.clientWidth - dragBtn.offsetWidth
            // 左边区域的最小宽度
            const leftValue = parseInt(that.setCssProps.leftMinWidth)
            if (moveW < leftValue) {
              moveW = leftValue
            }
            // 右边区域最小宽度
            const rightValue = parseInt(that.setCssProps.rightMinWidth)
            if (moveW > maxW - rightValue) {
              moveW = maxW - rightValue
            }
            left_box.style.cssText = `width:${moveW}px`
            right_box.style.width = dragLayoutBox.clientWidth - moveW + 'px'
          }
          document.onmouseup = () => {
            const styleStr = that.handleEleStyleFn(that.setCssProps.dragBtnCss.onmouseup)
            dragBtn.style.cssText = `${styleStr}`
            document.onmousemove = document.onmouseup = null
            if (that.iframeIsHave) {
              that.changeBoxStyleFn('none')
            }
            dragBtn.releaseCapture && dragBtn.releaseCapture()
          }
          dragBtn.setCapture && dragBtn.setCapture()
          return false
        }
      },
      // 处理传来的对象：{k1:"v1",k2:"v2"} => "k1:v1;k2:v2"
      handleEleStyleFn(obj) {
        let str = JSON.stringify(obj)
        const indexstart = str.indexOf('{')
        const indexEnd = str.indexOf('}')
        str = str.slice(indexstart + 1).slice(0, indexEnd - 1)
        const reg1 = /,/g
        const reg2 = /"|'/g
        return str.replace(reg1, ';').replace(reg2, '')
      },
    }
  }
  </script>
  
  <style scoped lang="scss">
  #dragLayoutBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    // box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.08);
    // background-color: red;
    // height: calc(100vh - 160px);
    .left_box,.right_box{
        // height: calc(100vh - 160px);
    }
  }
  .drag_btn {
    position: absolute;
    top: calc((100vh + 50px) / 2);
    width: 8px;
    height: 50px;
    cursor: col-resize;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    margin-top: -10px;
    background-size: cover;
    background-position: center;
    font-size: 32px;
    color: white;
    z-index: 1112;
  }
  .opacity_box {
    width: 100%;
    height: 100%;
    position: absolute;
    margin-top: 30px;
    filter: alpha(opacity=0);
    opacity: 0;
    background: transparent;
    z-index: 1111;
  }
  </style>